
<% content_for(:head) do %>
	<%= stylesheet_link_tag "jquery.Jcrop" %>
	<%= javascript_include_tag "jquery.Jcrop.min" %>
<% end %>
<script type="text/javascript" charset="utf-8">
$(function() {
  $('#source_pic').Jcrop({
    onChange: show_preview,
    onSelect: show_preview,
    setSelect: [0, 0, 115, 115],
    aspectRatio: 1
  });
/*  
  $('#upload_pic').live('click',function(){
  	alert("test");
  	$.ajax({
  		url: "/myaccount/upload_pic",
  		//data:	{"user[pic]" : $("#"), "authenticity_token" : $("#")}
  		data:	$("#upload_pic_form").serialize(),
  		type: "post",
			async: true,
			success: function(data){
				$("#source_pic").attr("src", data);
				$("#update_pic_img").val(data);
			},error: function(){ 
				alert('上传失败!'); 
			}
  	});
  	return false;
  });
*/  
});
<% if @user_icon %>
function show_preview(coords) {
	var rx = 50/coords.w;
	var ry = 50/coords.h;
	$('#preview').css({
		width: Math.round(rx * <%= @user_icon.pic_geometry(:large).width %>) + 'px',
		height: Math.round(ry * <%= @user_icon.pic_geometry(:large).height %>) + 'px',
		marginLeft: '-' + Math.round(rx * coords.x) + 'px',
		marginTop: '-' + Math.round(ry * coords.y) + 'px'
	});
	
	var ratio = <%= @user_icon.pic_geometry(:original).width %> / <%= @user_icon.pic_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}
<% end %>

</script>


<div id="content">
    <h1>添加或更改你的大头像</h1>
    <div class="grid-16-8 clearfix">
      <div class="article">
        <%= render :partial => 'top_nav',  :locals => { :on =>  2 } -%>
        <div class="clear"></div>
        <% form_for :user_icon, :url => upload_pic_myaccount_path, :html => { :multipart => true, :id => "upload_pic_form", } do |f| %>
        <table >
        <%= render :partial => 'notice_message' -%>
          <tbody>
            <tr>
              <td valign="top"><img id="source_pic" style="float: left; margin: 1px 18px 1px 0pt;" src="<%=@user_icon.tmp_pic.url(:large) %>"></td>
              <td><div class="m">从电脑中选择你喜欢的照片:</div>
                <br>
                <span class="pl">你可以上传JPG、JPEG、GIF、PNG或BMP文件。</span><br>
                <%= f.file_field :tmp_pic, :size => '20' %>
                <br/>
                <br/>
                <%= f.submit '上传照片', :id => "upload_pic" %>
                <br/>
                <br/>
                <p class="ul"></p>
                <br/>
                <div class="m">这是你的头像图标</div>
                <br/>
                <div style="width:50px; height:50px; overflow:hidden">
									<%= image_tag @user_icon.tmp_pic.url(:large), :id => "preview" %>
								</div>
                <div style="margin-left: 56px;" class="pl">随意拖拽或缩放大图中的虚线方格，预览的小图即为保存后的头像图标。</div>
                <div class="clear"></div>
                <br/></td>
            </tr>
            <% end %>
            
            
            <% form_for :user_icon, @user_icon, :url => update_pic_myaccount_path do |f| %>
				    	<% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
							 	<%= f.hidden_field attribute, :id => attribute %>
							<% end %>
							
            <tr>
              <td style="padding-top: 20px;" colspan="2">
              	<%= f.submit '保存头像设置'%>
                <input type="submit" value="撤消" >
              </td>
            </tr>
            <% end %>
          </tbody>
        </table>
        
      </div>
      <div class="aside">
        <h2> 查看衣评吧 </h2>
        上传你喜欢的照片，随意拖拽或调整大图中的虚线方格，预览的小图（50x50像素）即为保存后的头像图标。<br/>
        建议上传近距离的照片（比如大头照、特写），这样经过编辑后的头像会很清楚。<br/>
        保存成功后如果图标不更新，你可以用浏览器多刷新几次。 </div>
      <div class="extra"> </div>
    </div>
  </div>
</div>
